<template>
	<view class="home">
		<view class="search_box">
			<view class="search">
				<icon type="search" color="#bcbcbc" size="20" />
				<text class="word">搜索</text>
			</view>
		</view>
		<view class="banner-box">
			<swiper class="swiper" circular autoplay interval="3000" indicator-dots indicator-color="#fff" indicator-active-color="rgba(0,0,0,.3)">
				<swiper-item v-for="(item, index) in bannerList" :key="index"><image :src="item.image_src"></image></swiper-item>
			</swiper>
		</view>
		<view class="catitems">
			<image src="../../static/images/icon_index_nav_4@2x.png"></image>
			<image src="../../static/images/icon_index_nav_3@2x.png"></image>
			<image src="../../static/images/icon_index_nav_2@2x.png"></image>
			<image src="../../static/images/icon_index_nav_1@2x.png"></image>
		</view>
		<view class="floor-box">
			<view class="floor-top"><image :src="floorTitle" mode=""></image></view>
			<view class="hot-clothing">
				<view class="left-photo"><image :src="productList[0].image_src"></image></view>
				<view class="right-photo">
					<image :src="productList[1].image_src"></image>
					<image :src="productList[2].image_src"></image>
					<image :src="productList[3].image_src"></image>
					<image :src="productList[4].image_src"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../utils/request.js"
export default {
	watch:{
		title:{
			handler:function(n,o){
			  
			},
			immediate:true
		}
	},
	computed:{
		productList:function(){
			if(this.floorMessage.length>0){
			this.floorTitle =	this.floorMessage[this.title].floor_title.image_src
				return this.floorMessage[this.title].product_list
			}
		}
	},
	data() {
		return {
      title:2,
			floorMessage:[],
			floorTitle:'',
			bannerList:[]
		};
	},
	methods: {
	async	getBanner(){
	    const data =  await request({
					url:"/api/public/v1/home/swiperdata"
				})
			this.bannerList = data[1].data.message
			console.log(data)
		},
		async getFloorTitle(){
			const data = await request({
				url:"/api/public/v1/home/floordata"
			})
			this.floorMessage = data[1].data.message
			this.title = Math.floor(Math.random()*this.floorMessage.length)
		}
	},
	created() {
		this.getBanner()
		this.getFloorTitle()
	}
};
</script>

<style lang="less">
.search_box {
	width: 100%;
	height: 100rpx;
	background: #eb4450;
	overflow: hidden;
	.search {
		height: 60rpx;
		margin: 20rpx 15rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #bcbcbc;
		border-radius: 5rpx;
		.word {
			margin-left: 5rpx;
		}
	}
}
.banner-box {
	width: 750rpx;
	height: 340rpx;
	.swiper{
		height: 340rpx;
	}
	swiper-item {
		width: 750rpx;
		height: 340rpx;
		image {
			width: 750rpx;
			height: 340rpx;
		}
	}
}
.catitems {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 192rpx;
	image {
		width: 128rpx;
		height: 140rpx;
	}
}
.floor-top {
	height: 88rpx;
	width: 100%;
	background: #f4f4f4;
	display: flex;
	align-items: flex-end;
	image {
		height: 60rpx;
		width: 100%;
	}
}
.hot-clothing {
	box-sizing: border-box;
	padding: 20rpx 15rpx;
	display: flex;
	justify-content: space-between;

	.left-photo {
		width: 232rpx;
		height: 386rpx;
		image {
			height: 100%;
			width: 100%;
		}
	}

	.right-photo {
		width: 476rpx;
		height: 386rpx;
		display: flex;
		justify-content: space-between;
		flex-flow: wrap;
		image {
			margin-bottom: 18rpx;
			height: 186rpx;
			width: 231rpx;
		}
	}
}
</style>
